// 布局文件（决定了项目的页面结构，共用一些内容）
import React, { Component, Fragment } from 'react';
import Admin from '../../router/Admin';
import { Layout, Menu, Modal } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import "../../assets/layout.css"
import req from "../../http/req"
import url from "../../config/url"
import { Link } from 'react-router-dom';
import Checklogin from '../../hoc/CheckLogin';
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
let obj = sessionStorage.getItem("acl")
class Dashboard extends Component {
  state = {
    collapsed: false,
    visible: false,
    collapsible: true,
    obj: JSON.parse(obj),
    selectedKey: [this.props.location.pathname],
    openKey: [this.props.location.pathname.split("/").splice(0,3).join("/")]
  }
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    })
  }
  render() {
    return (
      <>
        <Layout style={{ height: "100%" }}>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={this.state.selectedKey} defaultOpenKeys={this.state.openKey}>
              {
                this.state.obj.map((item) => {
                  if (item.children.length !== 0)
                    return <SubMenu key={item.auth_path} title={item.auth_name}>
                      {
                        item.children.map((ls) => {
                          // console.log(ls)
                          return ls.is_nav ? <Menu.Item key={ls.auth_path} >
                            <Link to={ls.auth_path}>{ls.auth_name}</Link> 
                          </Menu.Item> : <Fragment key={ls.auth_path}></Fragment>
                        })
                      }
                    </SubMenu>
                  else {
                    return <Menu.Item key={item.auth_path}>
                      {item.auth_name}
                    </Menu.Item>
                  }
                })
              }
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ paddingRight: "20px" }}>
              {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: this.toggle,
              })}
              <span style={{ paddingLeft: "20px" }}>
                您好，{this.state.uname}！上次登录于{this.state.addr}（{this.state.ip}）[<a onClick={this.confirm} >注销登录</a>]
              </span>
            </Header>
            <Content
              className="site-layout-background"
              style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
              }}
            >
              <Admin />
            </Content>
          </Layout>
        </Layout>
        <Layout>

        </Layout>
      </>
    );
  }

  componentDidMount() {
    req.get(url.GetAdminInfo).then((res) => {
      if (res.data.errNo === 0) {
        this.setState({
          uname: res.data.accountInfo.username,
          addr: res.data.accountInfo.last_login_addr.state + " " + res.data.accountInfo.last_login_addr.isp,
          ip: res.data.accountInfo.last_ip
          // obj: sessionStorage.getItem("acl")
        })
        /* let params = JSON.parse(this.state.obj)
        this.setState({
          params
        })
        // console.log(this.state.params) */
      }
    })
  }
  confirm = () => {
    Modal.confirm({
      title: '确认操作',
      icon: <ExclamationCircleOutlined />,
      content: '您是否确认需要注销本次登录',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        sessionStorage.removeItem("jwt")
        sessionStorage.removeItem("acl")
        this.props.history.push("/login")
      }
    });
  }
}

export default Checklogin(Dashboard);
